<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8"/>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script th:src="@{/echarts/echarts.min.js}"></script>
    <script th:src="@{/echarts/china.js}"></script>
    <script th:src="@{/echarts/jquery-1.11.1.min.js}"></script>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
</head>

<style>
    /* 统一容器样式 */
    .layui-panel {
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        overflow: hidden;
    }

    /* 按钮容器 */
    .layui-btn-container {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin: 15px 0;
    }

    /* 地图容器 */
    #main {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* 右侧面板样式 */
    .layui-col-md4 .layui-panel {
        /*height: 600px;*/
    }

    /* 响应式调整 */
    @media (max-width: 1200px) {
        .layui-col-md8,
        .layui-col-md4 {
            width: 100%;
        }

        #main {
            height: 400px;
            margin-bottom: 15px;
        }

        .layui-col-md4 .layui-panel {
            height: auto;
        }
    }
</style>

<body class="childrenBody">
    <div>
        <div class="layui-bg-gray" style="padding: 30px;">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md8">
                    <div class="layui-panel">
                        <!--全国人口普查数据展示-->
                        <div style="padding-left: 15px">
                            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                            <legend><span id="censusDesc">数据未知</span>数据展示(单位：万人) ----- 统计截止时间：<span id="updateTime">时间未知</span></legend>
                            </fieldset>
                            <div class="layui-btn-container">
                                <button type="button" class="layui-btn layui-btn-normal layui-btn-lg">
                                    总人口数：<span id="totalPopulation">数据未知</span>
                                </button>
                                <button type="button" class="layui-btn layui-btn-warm layui-btn-lg">
                                    出生人数：<span id="totalBirthNum">数据未知</span>
                                </button>
                                <button type="button" class="layui-btn layui-bg-black layui-btn-lg">
                                    死亡人数：<span id="totalDeadNum">数据未知</span>
                                </button>
                                <button type="button" class="layui-btn layui-btn-danger layui-btn-lg">
                                    人口自然增长率：<span id="netPopulationGrowth">数据未知</span>‰
                                </button>
                                <!--添加下拉框-->
                                <select id="censusTimeSelect" style="font-size: 16px">
                                    <!--选项将通过 JavaScript 动态添加-->
                                </select>
                            </div>
                        </div>
                        <!-- 放入《中国疫情数据地图》-->
                        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                        <!-- 地图与右侧面板容器 -->
                        <div class="layui-row layui-col-space15" style="padding: 15px;">
                            <!-- 人口地图 -->
                            <div class="layui-col-md8">
                                <div id="main" style="width: 100%; height: 750px; background: #fff; border-radius: 4px;"></div>
                            </div>

                            <!-- 右侧面板1 各省人口排行（原"一个面板"） -->
                            <div class="layui-col-md4 layui-panel" style="height: 480px;margin-top: 10px;margin-bottom: 10px">
                                <div style="height: 700px;">
                                    <div style="height: 100%; padding: 15px; background: #fff; border-radius: 4px;">
                                        <h3 class="layui-panel-title" style="align-content: center">各省人口排行</h3>
                                        <!-- 人口排行 -->
                                        <table class="layui-hide" id="demo" lay-filter="test"></table>
                                    </div>
                                </div>
                            </div>

                            <!-- 右侧面板2 普查人口折线缩略图（原"一个面板"） -->
                            <div class="layui-col-md4 layui-panel" style="height: 258px">
                                <div style="height: 700px;">
                                    <div style="height: 100%; padding: 15px; background: #fff; border-radius: 4px;">
                                        <h4 class="layui-panel-title" style="text-align: center; color: red; margin-top:-10px;padding-bottom: 10px">普查人口相关缩略图(点击图片查看详情)</h4>
                                        <div class="layui-carousel" id="test" lay-filter="test">
                                            <!--轮播图-->
                                            <div carousel-item="">
                                                <!-- 普查人口折线缩略图 -->
                                                <a th:href="@{/toLine}">
                                                    <img alt="近七次中国人口普查数据折线图.png" style="width: auto;height: 210px" th:src="@{/images/index/近七次中国人口普查数据折线图.png}">
                                                </a>
                                                <!-- 普查人口饼图缩略图 -->
                                                <a th:href="@{/toPie}">
                                                    <img alt="中国第一次全国人口普查数据饼图(单位：万人).png" style="width: auto;height: 210px" th:src="@{/images/index/中国第一次全国人口普查数据饼图(单位：万人).png}">
                                                </a>
                                                <!-- 普查人口柱状缩略图 -->
                                                <a th:href="@{/toBar}">
                                                    <img alt="中国第一次全国人口普查数据柱状图(单位：万人).png" style="width: auto;height: 210px" th:src="@{/images/index/中国第一次全国人口普查数据柱状图(单位：万人).png}">
                                                </a>
                                                <!-- 2021年世界人口分布地图 -->
                                                <a th:href="@{/toGlobal}">
                                                    <img alt="2021年全球入口数据地图.png" style="width: auto;height: 210px" th:src="@{/images/index/2021年全球入口数据地图.png}">
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-panel">
                        <div class="layui-carousel" id="test1" lay-filter="test1">
                            <!--轮播图-->
                            <div carousel-item="">
                                <div><img style="width: 100%;height: 380px" th:src="@{/images/index/1.jpg}"></div>
                                <div><img style="width: 100%;height: 380px" th:src="@{/images/index/2.jpg}"></div>
                                <div><img style="width: 100%;height: 380px" th:src="@{/images/index/3.jpg}"></div>
                                <div><img style="width: 100%;height: 380px" th:src="@{/images/index/4.jpg}"></div>
                                <div><img style="width: 100%;height: 380px" th:src="@{/images/index/5.jpg}"></div>
                                <div><img style="width: 100%;height: 380px" th:src="@{/images/index/6.jpg}"></div>
                            </div>
                        </div>
                        <!--新闻-->
                        <div style="padding-top: 10px; padding-left: 10px; height: 253px; width: auto; overflow-y: auto; overflow-x: hidden;">
                            <span><b>新闻(点击对应标题，即可查看详情)</b></span><hr>
                            <div class="layui-timeline">
                                <div class="layui-timeline-item" th:each="news : ${newsList}">
                                    <i class="layui-icon layui-timeline-axis layui-icon-website"></i>
                                    <div class="layui-timeline-content layui-text">
                                        <div class="layui-timeline-title">
                                            <a th:if="${news != null}" th:href="@{/news/detail/{id}(id=${news.id})}" th:text="${news.title}"></a><br>
                                            <span style="font-size: 13px" class="layui-icon layui-icon-log" th:text="${news.createTime} != null ?
                                        ${#dates.format(news.createTime,'yyyy-MM-dd HH:mm:ss')} : '时间未知'"></span>
                                        </div>
                                    </div>
                                </div>
                                <li class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis"></i>
                                    <div class="layui-timeline-content layui-text">
                                        <div class="layui-timeline-title"><a th:href="@{/toPastNews}"><b>查看所有历史新闻</b></a></div>
                                    </div>
                                </li>
                            </div>
                        </div>
                        <hr>
                        <!--公告-->
                        <div style="padding-top: 10px; padding-left: 10px; height: 253px; width: auto; overflow-y: auto; overflow-x: hidden;">
                            <span><b>公告(点击对应标题，即可查看详情)</b></span><hr>
                            <div class="layui-timeline">
                                <div class="layui-timeline-item"
                                     th:each="notice : ${noticeList}"
                                     th:if="${notice.status == '0'}"> <!-- 关键条件判断 -->
                                    <i class="layui-icon layui-timeline-axis layui-icon-chart-screen"></i>
                                    <div class="layui-timeline-content layui-text">
                                        <div class="layui-timeline-title">
                                            <a th:if="${notice != null}" th:href="@{/notice/detail/{id}(id=${notice.id})}" th:text="${notice.title}"></a><br>
                                            <span style="font-size: 13px" class="layui-icon layui-icon-log" th:text="${notice.modifiedTime} != null ?
                                        ${#dates.format(notice.modifiedTime,'yyyy-MM-dd HH:mm:ss')} : '时间未知'"></span>
                                        </div>
                                    </div>
                                </div>
                                <li class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis"></i>
                                    <div class="layui-timeline-content layui-text">
                                        <div class="layui-timeline-title"><a th:href="@{/toPastNotice}"><b>查看所有历史通知/公告</b></a></div>
                                    </div>
                                </li>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

   <!-- layui的 JavaScript 代码片段 -->
    <script th:inline="javascript">
        //JS
        layui.use(['element', 'layer', 'util', 'carousel'], function(){
            var element = layui.element
                ,layer = layui.layer
                ,carousel = layui.carousel
                ,util = layui.util
                , table = layui.table //表格
                ,$ = layui.$;

            //头部事件
            util.event('lay-header-event', {
                //左侧菜单事件
                menuLeft: function(othis){
                    layer.msg('展开左侧菜单的操作', {icon: 0});
                }
                ,menuRight: function(){
                    layer.open({
                        type: 1
                        ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                        ,area: ['260px', '100%']
                        ,offset: 'rt' //右上角
                        ,anim: 5
                        ,shadeClose: true
                    });
                }
            });

            //常规轮播
            carousel.render({
                elem: '#test'
                ,arrow: 'always'
                ,height: '380px'
                ,width: '100%'
                ,interval: 3000
            });

            //常规轮播
            carousel.render({
                elem: '#test1'
                ,arrow: 'always'
                ,height: '380px'
                ,width: '100%'
                ,interval: 3000
            });

            // 监听下拉框选择事件
            document.getElementById('censusTimeSelect').addEventListener('change', function () {
                const censusTime = this.value;
                // 重新加载表格数据
                tableIns.reload({
                    url: `/listDataByPage?censusTime=${censusTime}`
                });
            });

            // 执行一个 table 实例
            var tableIns = table.render({
                elem: '#demo'
                , height: 400
                , url: `/listDataByPage?censusTime=7` // 初始加载第一次普查数据
                , title: '中国普查人口排行数据表'
                , totalRow: true // 开启合计行
                , cols: [[ // 表头
                    {field: 'asc', title: '排名', width: 75, sort: true, fixed: 'left', totalRowText: '合计：'}
                    , {field: 'cityName', title: '省份名称', width: 90}
                    , {field: 'population', title: '总人口数(万)', width: 140, sort: true, totalRow: true}
                    , {field: 'birthNum', title: '出生人数(万)', width: 140, sort: true, totalRow: true}
                    , {field: 'deadNum', title: '死亡人数(万)', width: 140, sort: true, totalRow: true}
                    , {field: 'sexRatio', title: '性别比(女=100)', width: 140, sort: true}
                ]],
                // ✅ 移除分页配置（已确认不需要分页）
                // 🔥 核心优化：在数据解析阶段直接生成排行，无需额外 reload
                parseData: function (res) {
                    // 1. 后端返回原始数据（无需 asc 字段）
                    // 2. 前端生成排行（index 从 0 开始，+1 为排行）
                    res.data.forEach((item, index) => {
                        item.asc = index + 1; // 🔥 直接修改数据，无需依赖 done
                    });
                    // 3. 返回标准格式（layui 要求包含 code/count/data）
                    return {
                        code: res.code,
                        msg: res.msg,
                        count: res.data.length, // 总记录数（用于合计行）
                        data: res.data // 包含 asc 字段的完整数据
                    };
                },
            });
        });
    </script>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        option = {
            tooltip: {
                triggerOn: "click",
                formatter: function(e, t, n) {
                    return '.5' === e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.value
                }
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    dataView: {readOnly: false},
                    restore: {},
                    saveAsImage: {}
                }
            }, // 提供下载工具
            visualMap: {
                min: 0,
                max: 100000,
                left: 26,
                bottom: 40,
                showLabel: !0,
                text: ["高", "低"],
                pieces: [{
                    gt: 10000,
                    label: "> 10000 万人",
                    color: "#f6260a"
                }, {
                    gte: 5000,
                    lte: 10000,
                    label: "5000 - 10000 万人",
                    color: "#f36a09"
                }, {
                    gte: 1000,
                    lt: 5000,
                    label: "1000 - 5000 万人",
                    color: "#f1b081"
                }, {
                    gt: 100,
                    lt: 1000,
                    label: "100 - 1000 万人",
                    color: "#f8e6b4"
                }, {
                    gt: 1,
                    lt: 100,
                    label: "1 - 100 万人",
                    color: "#ffffff"
                }],
                show: !0
            },
            geo: {
                map: "china",
                roam: !1,
                scaleLimit: {
                    min: 1,
                    max: 2
                },
                zoom: 1.23,
                top: 120,
                label: {
                    normal: {
                        show: !0,
                        fontSize: "14",
                        color: "rgba(0,0,0,0.7)"
                    }
                },
                itemStyle: {
                    normal: {
                        //shadowBlur: 50,
                        //shadowColor: 'rgba(0, 0, 0, 0.2)',
                        borderColor: "rgba(0, 0, 0, 0.2)"
                    },
                    emphasis: {
                        areaColor: "#f2d5ad",
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        borderWidth: 0
                    }
                }
            }
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        // 存储按普查时间分组的数据
        let groupedData = {};

        // 发起请求到整合后的接口
        $.ajax({
            url: "/queryIntegratedData",
            dataType: "json",
            success: function (data) {
                groupedData = data;
                updateSelectAndMap(data);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.error("请求失败：", textStatus, errorThrown);
                // 可以添加更友好的错误提示，例如使用 layui 的 layer 组件
                layui.use('layer', function () {
                    var layer = layui.layer;
                    layer.msg('数据加载失败，请检查网络', { icon: 5 });
                });
            }
        });

        // 提取公共逻辑函数
        function updateSelectAndMap(data) {
            // 更新下拉框
            const select = document.getElementById('censusTimeSelect');
            select.innerHTML = '';
            for (const censusTime in data) {
                const option = document.createElement('option');
                option.value = censusTime;
                option.text = data[censusTime].censusDesc;
                select.add(option);
            }

            // 找到第七次普查对应的选项并设为选中
            const firstCensusTime = Object.keys(data)[6];
            if (firstCensusTime) {
                for (let i = 0; i < select.options.length; i++) {
                    if (select.options[i].value === firstCensusTime) {
                        select.selectedIndex = i;
                        break;
                    }
                }
            }
            // 更新地图（默认显示第七次普查时间）
            if (data[firstCensusTime]) {
                updateMapData(data[firstCensusTime].cities);
                // 更新全国统计数据显示
                updateTotalData(data[firstCensusTime]);
            }
        }

        // 更新地图数据的函数
        function updateMapData(cities) {
            const formattedData = cities.map(city => ({
                name: city.cityName,
                value: city.population
            }));

            myChart.setOption({
                series: [{
                    name: "常住人口(万人)",
                    type: "map",
                    geoIndex: 0,
                    data: formattedData
                }]
            });

            console.log("数据已更新：", formattedData);
        }

        // 更新全国统计数据显示的函数
        function updateTotalData(totalData) {
            // 假设页面上有对应的元素来显示这些数据
            const totalPopulationElement = document.getElementById('totalPopulation');
            const totalBirthNumElement = document.getElementById('totalBirthNum');
            const totalDeadNumElement = document.getElementById('totalDeadNum');
            const netPopulationGrowthElement = document.getElementById('netPopulationGrowth');
            const censusDescElement = document.getElementById('censusDesc');
            const updateTimeElement = document.getElementById('updateTime');

            if (totalPopulationElement) {
                totalPopulationElement.textContent = totalData.totalPopulation;
            }
            if (totalBirthNumElement) {
                totalBirthNumElement.textContent = totalData.totalBirthNum;
            }
            if (totalDeadNumElement) {
                totalDeadNumElement.textContent = totalData.totalDeadNum;
            }
            if (netPopulationGrowthElement) {
                netPopulationGrowthElement.textContent = totalData.netPopulationGrowth;
            }
            if (censusDescElement) {
                censusDescElement.textContent = totalData.censusDesc;
            }
            if (updateTimeElement) {
                updateTimeElement.textContent = totalData.updateTime;
            }
        }

        // 下拉框选择事件处理函数
        document.getElementById('censusTimeSelect').addEventListener('change', function () {
            const selectedCensusTime = this.value;
            if (groupedData[selectedCensusTime]) {
                updateMapData(groupedData[selectedCensusTime].cities);
                // 更新全国统计数据显示
                updateTotalData(groupedData[selectedCensusTime]);
            } else {
                console.error('无效的普查时间：', selectedCensusTime);
                layui.use('layer', function () {
                    var layer = layui.layer;
                    layer.msg('数据加载失败，请重试', { icon: 5 });
                });
            }
        });
    </script>
</body>
</html>